<template>
  <div class="padding text-sm">
    <el-row :gutter="10" type="flex" class="flex-wrap">
      <el-col :lg="4" :md="24">
        <el-card class="margin-bottom">
          <div slot="header" class="clearfix relative">
            <span class="title-icon">渠道信息</span>
            <el-button
              type="success"
              size="mini"
              class="header-save-btn"
              @click="changeServiceInfo"
            >
              {{ isChangeChannelInfo ? "保存" : "编辑" }}
            </el-button>
          </div>
          <el-form size="mini" label-position="left" label-width="98px">
            <el-row :gutter="5">
              <el-col :span="24">
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="countryId">
                      <div slot="label">目的国家:</div>
                      <el-select
                        v-if="isChangeChannelInfo"
                        v-model="channelInfo.countryId"
                        placeholder="请选择目的国家"
                        filterable
                        clearable
                        :style="{ width: '100%' }"
                      >
                        <el-option
                          v-for="(k, v) in countryOptions"
                          :key="k"
                          :label="countryOptions[v]"
                          :value="parseInt(v)"
                        ></el-option>
                      </el-select>

                      <span v-else>{{
                        countryOptions[channelInfo.countryId]
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="inStockChannel">
                      <div slot="label">渠道:</div>
                      <el-select
                        v-if="isChangeChannelInfo"
                        v-model="channelInfo.inStockChannel"
                        placeholder="请选择渠道"
                        clearable
                        filterable
                        :style="{ width: '100%' }"
                      >
                        <el-option
                          v-for="(k, v) in stockChannelOptions"
                          :key="k"
                          :label="stockChannelOptions[v]"
                          :value="parseInt(v)"
                        ></el-option>
                      </el-select>
                      <span v-else>{{
                        stockChannelOptions[channelInfo.inStockChannel]
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="isTaxFarming">
                      <div slot="label">包税:</div>
                      <el-select
                        v-if="isChangeChannelInfo"
                        v-model="channelInfo.isTaxFarming"
                        placeholder="是否包税"
                        clearable
                        filterable
                        :style="{ width: '100%' }"
                      >
                        <el-option
                          v-for="(k, v) in isNotOptions"
                          :key="k"
                          :label="isNotOptions[v]"
                          :value="parseInt(v)"
                        ></el-option>
                      </el-select>
                      <span v-else>{{
                        isNotOptions[channelInfo.isTaxFarming]
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="customerActualWeight">
                      <div slot="label">实重(KG):</div>
                      <el-input
                        v-if="isChangeChannelInfo"
                        v-model="channelInfo.customerActualWeight"
                        clearable
                      />
                      <span v-else>{{ channelInfo.customerActualWeight }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="customerVolume">
                      <div slot="label">体积(CBM):</div>
                      <el-input
                        v-if="isChangeChannelInfo"
                        v-model="channelInfo.customerVolume"
                        clearable
                      />
                      <span v-else>{{ channelInfo.customerVolume }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="customerChargedWeight">
                      <div slot="label">体积重:</div>
                      <el-input
                        v-if="isChangeChannelInfo"
                        v-model="channelInfo.customerChargedWeight"
                        clearable
                      />
                      <span v-else>{{
                        channelInfo.customerChargedWeight
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="customerTotalPackages">
                      <div slot="label">件数:</div>
                      <el-input
                        v-if="isChangeChannelInfo"
                        v-model="channelInfo.customerTotalPackages"
                        clearable
                      />
                      <span v-else>{{
                        channelInfo.customerTotalPackages
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <el-col :lg="4" :md="24">
        <el-card class="margin-bottom">
          <div slot="header" class="clearfix relative">
            <span class="title-icon">入库信息</span>
          </div>
          <el-form size="mini" label-position="left" label-width="98px">
            <el-row :gutter="5">
              <el-col :span="24">
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="inStockTotalPackages">
                      <div slot="label">件数:</div>
                      <span>{{ inStockInfo.inStockTotalPackages }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="inStockActualWeight">
                      <div slot="label">实重(KG):</div>
                      <span>{{ inStockInfo.inStockActualWeight }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="inStockChargedWeight">
                      <div slot="label">计费重:</div>
                      <span>{{ inStockInfo.inStockChargedWeight }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="countryId">
                      <div slot="label">体积:</div>
                      <span>{{ inStockInfo.inStockVolume }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="">
                      <span>&nbsp;</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="">
                      <span>&nbsp;</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="">
                      <span>&nbsp;</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <el-col :lg="4" :md="24">
        <el-card class="margin-bottom">
          <div slot="header" class="clearfix relative">
            <span class="title-icon">出库信息</span>
            <el-button
              type="success"
              size="mini"
              class="header-save-btn"
              @click="changOutStockInfo"
            >
              {{ isChangeOutStockInfo ? "保存" : "编辑" }}
            </el-button>
          </div>
          <el-form size="mini" label-position="left" label-width="98px">
            <el-row :gutter="5">
              <el-col :span="24">
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="serviceTotalPackages">
                      <div slot="label">件数:</div>
                      <el-input
                        v-if="isChangeOutStockInfo"
                        v-model="outStockInfo.serviceTotalPackages"
                        clearable
                      />
                      <span v-else>{{
                        outStockInfo.serviceTotalPackages
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="serviceActualWeight">
                      <div slot="label">实重:</div>
                      <el-input
                        v-if="isChangeOutStockInfo"
                        v-model="outStockInfo.serviceActualWeight"
                        clearable
                      />
                      <span v-else>{{ outStockInfo.serviceActualWeight }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="serviceChargedWeight">
                      <div slot="label">计费重:</div>
                      <el-input
                        v-if="isChangeOutStockInfo"
                        v-model="outStockInfo.serviceChargedWeight"
                        clearable
                      />
                      <span v-else>{{
                        outStockInfo.serviceChargedWeight
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="serviceVolume">
                      <div slot="label">体积:</div>
                      <el-input
                        v-if="isChangeOutStockInfo"
                        v-model="outStockInfo.serviceVolume"
                        clearable
                      />
                      <span v-else>{{ outStockInfo.serviceVolume }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="serviceVolumeWeight">
                      <div slot="label">体积重:</div>
                      <el-input
                        v-if="isChangeOutStockInfo"
                        v-model="outStockInfo.serviceVolumeWeight"
                        clearable
                      />
                      <span v-else>{{ outStockInfo.serviceVolumeWeight }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="serviceUnitPrice">
                      <div slot="label">单价:</div>
                      <el-input
                        v-if="isChangeOutStockInfo"
                        v-model="outStockInfo.serviceUnitPrice"
                        clearable
                      />
                      <span v-else>{{ outStockInfo.serviceUnitPrice }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="5">
                  <el-col :span="24">
                    <el-form-item prop="serviceUnitPriceCurrency">
                      <div slot="label">币种:</div>
                      <el-input
                        v-if="isChangeOutStockInfo"
                        v-model="outStockInfo.serviceUnitPriceCurrency"
                        clearable
                      />
                      <span v-else>{{
                        outStockInfo.serviceUnitPriceCurrency
                      }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <el-col :lg="12" :md="24">
        <el-card class="margin-bottom">
          <div slot="header" class="clearfix relative">
            <span class="title-icon">订舱信息</span>
            <el-button
              type="success"
              size="mini"
              class="header-save-btn"
              @click="changeProtInfo"
            >
              {{ isChangeProtInfo ? "保存" : "编辑" }}
            </el-button>
          </div>
          <el-form size="mini" label-position="left" label-width="110px">
            <el-row class="row-customer-line" :gutter="10">
              <el-col :span="6">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="shipmentPort" label-width="70px">
                  <div slot="label">起运港:</div>

                  <el-select
                    v-if="isChangeProtInfo"
                    v-model="protInfo.shipmentPort"
                    placeholder="请选择起运港"
                    clearable
                    filterable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(k, v) in configPortOptions"
                      :key="k"
                      :label="configPortOptions[v]"
                      :value="parseInt(v)"
                    ></el-option>
                  </el-select>

                  <span v-else>{{
                    configPortOptions[protInfo.shipmentPort]
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="departurePortInspectionTime">
                  <div slot="label">起运港查验时间:</div>
                  <el-date-picker
                    v-if="isChangeProtInfo"
                    v-model="protInfo.departurePortInspectionTime"
                    type="date"
                    placeholder="选择日期"
                    :style="{ width: '100%' }"
                    :picker-options="pickerOptions"
                  >
                    >
                  </el-date-picker>

                  <span v-else>{{ protInfo.departurePortInspectionTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="departurePortInspectionReason">
                  <div slot="label">起运港查验原因:</div>

                  <el-input
                    v-if="isChangeProtInfo"
                    v-model="protInfo.departurePortInspectionReason"
                    clearable
                  />
                  <span v-else>{{
                    protInfo.departurePortInspectionReason
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="destinationPort" label-width="70px">
                  <div slot="label">目的港:</div>
                  <el-select
                    v-if="isChangeProtInfo"
                    v-model="protInfo.destinationPort"
                    placeholder="请选择目的港"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(k, v) in configPortOptions"
                      :key="k"
                      :label="configPortOptions[v]"
                      :value="parseInt(v)"
                    ></el-option>
                  </el-select>

                  <span v-else>{{
                    configPortOptions[protInfo.destinationPort]
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="arrivalPortInspectionTime">
                  <div slot="label">目的港查验时间:</div>
                  <el-date-picker
                    v-if="isChangeProtInfo"
                    v-model="protInfo.arrivalPortInspectionTime"
                    type="date"
                    placeholder="选择日期"
                    :style="{ width: '100%' }"
                    :picker-options="pickerOptions"
                  >
                    >
                  </el-date-picker>

                  <span v-else>{{ protInfo.arrivalPortInspectionTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="arrivalPortInspectionReason">
                  <div slot="label">目的港查验原因:</div>

                  <el-input
                    v-if="isChangeProtInfo"
                    v-model="protInfo.arrivalPortInspectionReason"
                    clearable
                  />
                  <span v-else>{{ protInfo.arrivalPortInspectionReason }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="transferPort" label-width="70px">
                  <div slot="label">中转港:</div>
                  <el-select
                    v-if="isChangeProtInfo"
                    v-model="protInfo.transferPort"
                    placeholder="请选择目的港"
                    clearable
                    filterable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(k, v) in configPortOptions"
                      :key="k"
                      :label="configPortOptions[v]"
                      :value="parseInt(v)"
                    ></el-option>
                  </el-select>

                  <span v-else>{{
                    configPortOptions[protInfo.transferPort]
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="transferPortInspectionTime">
                  <div slot="label">中转港查验时间:</div>
                  <el-date-picker
                    v-if="isChangeProtInfo"
                    v-model="protInfo.transferPortInspectionTime"
                    type="date"
                    placeholder="选择日期"
                    :style="{ width: '100%' }"
                    :picker-options="pickerOptions"
                  >
                    >
                  </el-date-picker>

                  <span v-else>{{ protInfo.transferPortInspectionTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="transferPortInspectionReason">
                  <div slot="label">中转港查验原因:</div>

                  <el-input
                    v-if="isChangeProtInfo"
                    v-model="protInfo.transferPortInspectionReason"
                    clearable
                  />
                  <span v-else>{{
                    protInfo.transferPortInspectionReason
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="serviceCompanyId" label-width="70px">
                  <div slot="label">服务商:</div>
                  <el-select
                    v-if="isChangeProtInfo"
                    v-model="protInfo.serviceCompanyId"
                    placeholder="请选择服务商"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(k, v) in serviceCompanyOptions"
                      :key="k"
                      :label="serviceCompanyOptions[v]"
                      :value="parseInt(v)"
                    ></el-option>
                  </el-select>

                  <span v-else>{{
                    serviceCompanyOptions[protInfo.serviceCompanyId]
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="customsClearanceAgent">
                  <div slot="label">清关服务商:</div>
                  <el-select
                    v-if="isChangeProtInfo"
                    v-model="protInfo.customsClearanceAgent"
                    placeholder="请选择清关服务商"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(k, v) in serviceCompanyOptions"
                      :key="k"
                      :label="serviceCompanyOptions[v]"
                      :value="parseInt(v)"
                    ></el-option>
                  </el-select>

                  <span v-else>{{
                    serviceCompanyOptions[protInfo.customsClearanceAgent]
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="linkMan">
                  <div slot="label">联系人:</div>

                  <el-input
                    v-if="isChangeProtInfo"
                    v-model="protInfo.linkMan"
                    clearable
                  />
                  <span v-else>{{ protInfo.linkMan }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="companyPhone" label-width="70px">
                  <div slot="label">电话:</div>
                  <el-input
                    v-if="isChangeProtInfo"
                    v-model="protInfo.companyPhone"
                    clearable
                  />
                  <span v-else>{{ protInfo.companyPhone }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="estimatedArrivalTime">
                  <div slot="label">预计到港时间:</div>
                  <el-date-picker
                    v-if="isChangeProtInfo"
                    v-model="protInfo.estimatedArrivalTime"
                    type="date"
                    placeholder="选择日期"
                    :style="{ width: '100%' }"
                    :picker-options="pickerOptions"
                  >
                    >
                  </el-date-picker>

                  <span v-else>{{ protInfo.estimatedArrivalTime }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="estimatedDepartureTime">
                  <div slot="label">预计离港时间:</div>
                  <el-date-picker
                    v-if="isChangeProtInfo"
                    v-model="protInfo.estimatedDepartureTime"
                    type="date"
                    placeholder="选择日期"
                    :style="{ width: '100%' }"
                    :picker-options="pickerOptions"
                  >
                    >
                  </el-date-picker>

                  <span v-else>{{ protInfo.estimatedDepartureTime }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item prop="customerRemark" label-width="70px">
                  <div slot="label">内部备注1:</div>
                  <el-input
                    v-if="isChangeProtInfo"
                    type="textarea"
                    v-model="protInfo.customerRemark"
                    clearable
                  />
                  <p style="white-space: normal;" v-else>
                    {{ protInfo.customerRemark }}
                  </p>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <el-form-item prop="shipOrAirlineCompany">
                  <div slot="label">船公司:</div>
                  <el-select
                    v-if="isChangeProtInfo"
                    v-model="protInfo.shipOrAirlineCompany"
                    placeholder="请选择船公司"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(k, v) in configShipOptions"
                      :key="k"
                      :label="serviceCompanyOptions[v]"
                      :value="parseInt(v)"
                    ></el-option>
                  </el-select>

                  <span v-else>{{
                    configShipOptions[protInfo.shipOrAirlineCompany]
                  }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="shipOrAirlineCompany">
                  <div slot="label">航空公司:</div>
                  <el-select
                    v-if="isChangeProtInfo"
                    v-model="protInfo.shipOrAirlineCompany"
                    placeholder="请选择航空公司"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(k, v) in airlineOptions"
                      :key="k"
                      :label="serviceCompanyOptions[v]"
                      :value="parseInt(v)"
                    ></el-option>
                  </el-select>

                  <span v-else>{{
                    airlineOptions[protInfo.shipOrAirlineCompany]
                  }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="flightNumber" label-width="70px">
                  <div slot="label">航班号:</div>
                  <el-input
                    v-if="isChangeProtInfo"
                    v-model="protInfo.flightNumber"
                    clearable
                  />
                  <span v-else>{{ protInfo.flightNumber }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="margin-bottom">
      <div slot="header" class="clearfix relative">
        <div class="title-icon">
          <span>运单信息</span>
          <span></span>
        </div>
      </div>
      <el-table :data="waybillData" border style="width: 100%">
        <el-table-column prop="waybillSingleId" label="分单号" width="180">
        </el-table-column>
        <el-table-column prop="waybillNo" label="运单号" width="180">
        </el-table-column>
        <el-table-column prop="isTaxFarming" width="120" label="包税">
        </el-table-column>
        <el-table-column prop="isCustomerDeclaration" width="120" label="报关">
        </el-table-column>
        <el-table-column prop="isVatAndEori" width="120" label="自有VAT">
        </el-table-column>
        <el-table-column prop="eoriIsCertified" width="120" label="自有进口商">
        </el-table-column>
        <el-table-column
          prop="dispatchAddressCode"
          width="120"
          label="仓库代码"
        >
        </el-table-column>
        <el-table-column width="180" prop="declareNameCn" label="中文品名">
        </el-table-column>
        <el-table-column
          v-if="isfcllclshow"
          width="120"
          prop="inStockTotalPackages"
          label="件数"
        >
        </el-table-column>
        <el-table-column
          v-if="isfcllclshow"
          width="120"
          prop="inStockActualWeight"
          label="重量"
        >
        </el-table-column>
        <el-table-column
          v-if="isfcllclshow"
          width="120"
          prop="inStockVolume"
          label="体积"
        >
        </el-table-column>
        <el-table-column
          v-if="isfcllclshow"
          width="180"
          prop="waybillLabel"
          label="标签"
        >
        </el-table-column>
        <el-table-column
          v-if="notfcllclshow"
          width="120"
          prop="salesmanId"
          label="销售"
        >
        </el-table-column>
        <el-table-column
          v-if="notfcllclshow"
          width="120"
          prop="servicesId"
          label="客服"
        >
        </el-table-column>
        <el-table-column
          v-if="notfcllclshow"
          width="120"
          prop="operationId"
          label="跟单操作"
        >
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="margin-bottom">
      <div slot="header" class="clearfix relative">
        <div class="title-icon">
          <span>M单 </span>
          <span>M单号: </span>
        </div>
        <el-button
          type="success"
          size="mini"
          class="header-save-btn"
          @click="changeMInfo"
        >
          {{ isChangeMInfo ? "保存" : "编辑" }}
        </el-button>
      </div>
      <el-form size="mini" label-position="left" label-width="68px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item prop="houseNumberSender">
              <div slot="label">发件人:</div>

              <div v-if="isChangeMInfo">
                <el-autocomplete
                  prefix-icon="el-icon-search"
                  v-model="MInfo.serachSender"
                  clearable
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @select="selectSenderM"
                  class="margin-bottom-sm"
                ></el-autocomplete>
                <el-input
                  type="textarea"
                  v-model="MInfo.masterNumberSender"
                ></el-input>
              </div>
              <span v-else>{{ MInfo.masterNumberSender }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="houseNumberReceiver">
              <div slot="label">收件人:</div>

              <div v-if="isChangeMInfo">
                <el-autocomplete
                  prefix-icon="el-icon-search"
                  v-model="MInfo.serachReceiver"
                  clearable
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @select="selectReceiverM"
                  class="margin-bottom-sm"
                ></el-autocomplete>
                <el-input
                  type="textarea"
                  v-model="MInfo.masterNumberReceiver"
                ></el-input>
              </div>
              <span v-else>{{ MInfo.masterNumberReceiver }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="masterNumberNotifier">
              <div slot="label">通知人:</div>

              <div v-if="isChangeMInfo">
                <el-autocomplete
                  prefix-icon="el-icon-search"
                  v-model="MInfo.serachNotifier"
                  clearable
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @select="selectNotifierM"
                  class="margin-bottom-sm"
                ></el-autocomplete>
                <el-input
                  type="textarea"
                  v-model="MInfo.masterNumberNotifier"
                ></el-input>
              </div>
              <span v-else>{{ MInfo.masterNumberNotifier }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="masterNumberAgent">
              <div slot="label">代理:</div>

              <div v-if="isChangeMInfo">
                <el-autocomplete
                  prefix-icon="el-icon-search"
                  v-model="MInfo.serachAgent"
                  clearable
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @select="selectAgentM"
                  class="margin-bottom-sm"
                ></el-autocomplete>
                <el-input
                  type="textarea"
                  v-model="MInfo.masterNumberAgent"
                ></el-input>
              </div>
              <span v-else>{{ MInfo.masterNumberAgent }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";

export default {
  data() {
    return {
      //运单信息
      waybillData: [],
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },

      isChangeProtInfo: false,
      isChangeChannelInfo: false,
      isChangeOutStockInfo: false,
      isChangeMInfo: false,
      isChangeHInfo: false,
      // 物流方法 是 FCL  LCL 时显示
      isfcllclshow: false,
      // 物流方法 不 是 FCL  LCL 时显示
      notfcllclshow: true,
      protInfo: {
        id: 0,
        waybillId: 0,
        shipmentPort: 1, // 起运港：
        destinationPort: 1, // 目的港：
        transferPort: 1, // 中转港：
        estimatedDepartureTime: 1, // 预计离港时间：
        departurePortInspectionTime: "", // 起运港查验时间：
        arrivalPortInspectionTime: "", // 目的港查验时间：
        transferPortInspectionTime: "", // 中转港查验时间：
        estimatedArrivalTime: "", // 预计到港时间：
        departurePortInspectionReason: 1, // 起运港查验原因：
        arrivalPortInspectionReason: 1, // 目的港查验原因：
        transferPortInspectionReason: 1 // 中转港查验原因：
      },
      outStockInfo: {},
      inStockInfo: {},
      channelInfo: {},
      MInfo: {
        id: 0,
        waybillId: 0,
        masterNumber: 1, // M单号：
        masterNumberSender: 1, // M单号：发件人
        masterNumberReceiver: 1, // M单号：收件人
        masterNumberNotifier: 1, // M单号：通知人
        masterNumberAgent: 1, // M单号：代理
        serachSender: "",
        serachReceiver: "",
        serachNotifier: "",
        serachAgent: ""
      },
      HInfo: {
        id: 0,
        waybillId: 0,
        houseNumber: 1, // H单号：
        houseNumberSender: 1, // H单号：发件人
        houseNumberReceiver: 1, // H单号：收件人
        houseNumberNotifier: 1, // H单号：通知人
        houseNumberAgent: 1, // H单号：代理
        serachSender: "",
        serachReceiver: "",
        serachNotifier: "",
        serachAgent: ""
      },
      isNotOptions: {
        1: "是",
        0: "否"
      },
      //渠道下拉
      stockChannelOptions: {},
      //国家下拉
      countryOptions: {},
      //港口下拉
      configPortOptions: {},
      //航空公司下拉
      airlineOptions: {},
      //船公司
      configShipOptions: {},
      //服务商
      serviceCompanyOptions: {},
      restaurants: [],
      state4: "",
      timeout: null
    };
  },
  methods: {
    initData() {
      var param = {};
      param["id"] = this.$route.query.waybillId;
      ajax("initDataPickUpData", param).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            if (null != res.data) {
              console.log(res.data);
              this.protInfo = res.data;
              this.serviceInfo = res.data;
              this.MInfo = res.data;
              this.HInfo = res.data;
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    getProtOptions() {
      ajax("getProtOptions", {}).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            if (null != res.data) {
              this.restaurants = res.data["companyMap"];
              this.configPortOptions = res.data["configPortMap"];
              this.airlineOptions = res.data["airlineMap"];
              this.serviceCompanyOptions = res.data["serviceCompanyMap"];
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    changeProtInfo() {
      if (this.isChangeProtInfo) {
        this.isChangeProtInfo = false;
        var param = this.protInfo;
        ajax("changeProtInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              console.log(res.data);
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeProtInfo = true;
      }
    },

    changOutStockInfo() {
      if (this.isChangeOutStockInfo) {
        this.isChangeOutStockInfo = false;
        var param = this.outStockInfo;
        ajax("changeProtInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              console.log(res.data);
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeOutStockInfo = true;
      }
    },

    changeServiceInfo() {
      if (this.isChangeChannelInfo) {
        this.isChangeChannelInfo = false;
        var param = this.channelInfo;
        ajax("changeServiceInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              console.log(res.data);
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeChannelInfo = true;
      }
    },
    changeMInfo() {
      if (this.isChangeMInfo) {
        this.isChangeMInfo = false;
        var param = this.MInfo;
        ajax("changeMInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              console.log(res.data);
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeMInfo = true;
      }
    },
    changeHInfo() {
      if (this.isChangeHInfo) {
        this.isChangeHInfo = false;
        var param = this.HInfo;
        ajax("changeHInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              console.log(res.data);
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeHInfo = true;
      }
    },
    querySearchAsync(queryString, cb) {
      console.log(
        "%cqueryString: ",
        "color: MidnightBlue; background: Aquamarine;",
        queryString
      );
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    loadAll() {
      return [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号"
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
        },
        { value: "泷千家(天山西路店)", address: "天山西路438号" },
        {
          value: "胖仙女纸杯蛋糕（上海凌空店）",
          address: "上海市长宁区金钟路968号1幢18号楼一层商铺18-101"
        },
        { value: "贡茶", address: "上海市长宁区金钟路633号" },
        {
          value: "豪大大香鸡排超级奶爸",
          address: "上海市嘉定区曹安公路曹安路1685号"
        },
        {
          value: "茶芝兰（奶茶，手抓饼）",
          address: "上海市普陀区同普路1435号"
        },
        { value: "十二泷町", address: "上海市北翟路1444弄81号B幢-107" },
        { value: "星移浓缩咖啡", address: "上海市嘉定区新郁路817号" },
        { value: "阿姨奶茶/豪大大", address: "嘉定区曹安路1611号" },
        { value: "新麦甜四季甜品炸鸡", address: "嘉定区曹安公路2383弄55号" },
        {
          value: "Monica摩托主题咖啡店",
          address: "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"
        },
        {
          value: "浮生若茶（凌空soho店）",
          address: "上海长宁区金钟路968号9号楼地下一层"
        },
        { value: "NONO JUICE  鲜榨果汁", address: "上海市长宁区天山西路119号" },
        { value: "CoCo都可(北新泾店）", address: "上海市长宁区仙霞西路" },
        {
          value: "快乐柠檬（神州智慧店）",
          address: "上海市长宁区天山西路567号1层R117号店铺"
        },
        {
          value: "Merci Paul cafe",
          address: "上海市普陀区光复西路丹巴路28弄6号楼819"
        }
      ];
    },
    selectSenderM(val) {
      this.MInfo.masterNumberSender = val.value;
    },
    selectReceiverM(val) {
      this.MInfo.masterNumberReceiver = val.value;
    },
    selectNotifierM(val) {
      this.MInfo.masterNumberNotifier = val.value;
    },
    selectAgentM(val) {
      this.MInfo.masterNumberAgent = val.value;
    },
    selectSenderH(val) {
      this.HInfo.houseNumberSender = val.value;
    },
    selectReceiverH(val) {
      this.HInfo.houseNumberReceiver = val.value;
    },
    selectNotifierH(val) {
      this.HInfo.houseNumberNotifier = val.value;
    },
    selectAgentH(val) {
      this.HInfo.houseNumberAgent = val.value;
    }
  },
  mounted() {
    this.initData();
    this.getProtOptions();
    this.restaurants = this.loadAll();
  }
};
</script>

<style></style>
